<script setup>
import { ref, reactive, getCurrentInstance, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import qrcode from 'qrcode'
import statusBar from '../../components/statusBar.vue'
import counter from '../../components/counter.vue'

// 获取当前实例
const { proxy } = getCurrentInstance()
// 路由
const router = useRouter()
const route = useRoute()

// 订单详情信息数据
const orderInfo = reactive({})
// 订单状态映射
const stateMap = {
  '待支付': 10,
  '待服务': 20,
  '已完成': 30,
  '已取消': 40,
}
//计算倒计时
const second = computed(() => {
  return orderInfo.order_start_time
    ? orderInfo.order_start_time + 7200000 - Date.now()
    : 0
})

// 预约信息
const makeInfo = {
  service_name: '预约服务',
  hospital_name: '就诊医院',
  starttime: '期待就诊时间',
  'client.name': '就诊人',
  'client.mobile': '就诊人电话',
  receiveAddress: '接送地址',
  demand: '其他需求'
}
// 订单信息
const orderMes = {
  tel: '就诊人电话',
  order_start_time: '下单时间',
  price: '应付金额',
  out_trade_no: '订单编号'
}

// 处理信息
function formData(key) {
  if(key.indexOf('.') === -1) {
    if(key === 'order_start_time') {
      return formatTimestamp(orderInfo[key])
    }
    return orderInfo[key]
  }
  let arr = key.split('.').reduce((o, p) => {
    return (o || {})[p]
  }, orderInfo)

  return arr
}
// 时间戳转日期
function formatTimestamp(timestamp) {
  const date = new Date(timestamp)
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  return `${year}-${month}-${day}`
}

// 挂在
onMounted(async () => {
  const { data } = await proxy.$api.getOrder({ oid: route.query.oid })
  // 逐一赋值
  for (let key in data.data) {
    orderInfo[key] = data.data[key]
  }

  // 生成二维码
  qrcode.toDataURL(data.data.code_url).then((url) => {
    codeImg.value = url
  })
})

// 返回上一页
function goBack() {
  router.go(-1)
}

// 支付弹窗
const showCode = ref(false)
// 二维码地址
const codeImg = ref('')
// 关闭二维码
function closeCode() {
  showCode.value = false
  router.push('/order')
}
</script>

<template>
  <div class="container">
    <div class="header">
      <van-icon
        @click="goBack"
        name="arrow-left"
        class="header-left"
        size="30"
      />
      填写服务订单
    </div>
    <!-- 状态栏 -->
    <statusBar :item="stateMap[orderInfo.trade_state]" />
    <div class="tips">
      <!-- 待支付 -->
      <div class="dzf" v-if="orderInfo.trade_state === '待支付'">
        <div class="text1">订单待支付</div>
        <div class="text2">
          请在 <counter :second="second" /> 内完成支付，超时订单自动取消
        </div>
        <div class="text3">
          <van-button type="success" @click="showCode = true"
            >立即支付(0.5元)</van-button
          >
        </div>
      </div>
      <!-- 待服务 -->
      <div class="dzf" v-if="orderInfo.trade_state === '待服务'">
        <div class="text1">正在为您安排服务专员...</div>
        <div class="text2">请保持手机从通畅，稍后将有服务员与您联系</div>
      </div>
      <!-- 已完成 -->
      <div class="dzf" v-if="orderInfo.trade_state === '已完成'">
        <div class="text1">服务已完成</div>
        <div class="text2">感谢您的使用，如有售后问题请联系客服</div>
      </div>
       <!-- 已取消 -->
      <div class="dzf" v-if="orderInfo.trade_state === '已取消'">
        <div class="text1">订单已取消</div>
        <div class="text2">期待下次为您服务，如有需要帮助可咨询客服</div>
      </div>
    </div>
    <van-cell-group
      class="card">
      <div class="header-text">预约信息</div>
      <van-cell 
        v-for="(item, key) in makeInfo" 
        :key="key"
        :title="item"
        :value="formData(key)"
        />
    </van-cell-group>
    <van-cell-group
      class="card">
      <div class="header-text">订单信息</div>
      <van-cell 
        v-for="(item, key) in orderMes" 
        :key="key"
        :title="item"
        :value="formData(key)"
        />
      <van-cell
        title="联系客服"
        value="疑问或投诉>"/>
    </van-cell-group>

    <!-- 字符二维码 -->
    <van-dialog v-model:show="showCode" :showConfirmButton="false">
      <van-icon name="cross" class="close" @click="closeCode"></van-icon>
      <div>微信支付</div>
      <van-image width="150" height="150" :src="codeImg"> </van-image>
      <div>请使用本人微信支付</div>
    </van-dialog>
  </div>
</template>

<style scoped lang="less">
.container {
  background-color: #f0f0f0;
  height: 100vh;
}
.header {
  background-color: #fff;
  line-height: 40px;
  text-align: center;
  .header-left {
    float: left;
    margin: 5px;
  }
}
.card {
  margin: 15px 0;
  padding: 10px;
  .header-text {
    padding-left: 5px;
    line-height: 30px;
    font-size: 16px;
    font-weight: bold;
    border-left: 4px solid red;
  }
}
.dzf {
  padding: 20px;
  .text1 {
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    color: #666;
  }
  .text2 {
    font-size: 14px;
    color: #666;
  }
  .text3 {
    text-align: center;
    .van-button {
      margin-top: 10px;
      margin-left: 10px;
      width: 80%;
      font-weight: bold;
    }
  }
}
::v-deep(.van-dialog__content) {
  text-align: center;
  padding: 20px;
  .close {
    position: absolute;
    left: 20px;
  }
}
</style>
